<template>
	<view class="home">
		<!-- <view class="top_tab_bar flex flex_d_c v_center h_center" :style="{
			paddingTop:`${windowInfo.statusBarHeight}px`
		}">
		<up-image :show-loading="true" src="/static/images/swiper_icon.png" width="130rpx" height="40rpx"></up-image>
		<up-text text="订单" color="#333333" bold size="20" style="margin-top: 20rpx;" align="center"></up-text>
		</view> -->
		<view class="list">
			<up-list @scrolltolower="scrolltolower">
				<up-list-item v-for="(item, index) in indexList" :key="index">
					<OrderItem></OrderItem>
				</up-list-item>
			</up-list>
			<up-loadmore v-if="!loading && indexList.length != 0" :status="status" />
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import OrderItem from '@/components/OrderItem.vue'

const windowInfo = uni.getWindowInfo();
const isAll = ref(false)
const pageInfo = ref({
	pageNum: 1,
	pageSize: 10
})
const loading = ref(true)
const indexList = ref([]);

onLoad(() => {
	loadmore();
});

const scrolltolower = () => {
	if (isAll.value) return
	loadmore();
};

const loadmore = () => {
	for (let i = 0; i < 10; i++) {
		indexList.value.push(indexList.value.length - 1);
	}
	loading.value = false
	if (indexList.value.length >= 10) {
		isAll.value = true
	}
};
const status = computed(() => {
	if (isAll) return 'nomore'
	return 'loading'
})
</script>

<style lang="scss" scoped>
.home {
	min-height: 100vh;
	background-color: #f2f2f2;
	background-attachment: scroll;
	box-sizing: border-box;
	padding-bottom: 80rpx;

	// .top_tab_bar {
	// 	width: 100%;
	// 	height: 195rpx;
	// 	min-height: 195rpx;
	// 	background-color: #fff;
	// }
	.list {
		// min-height: calc(100vh - 195rpx);
		// height: calc(100vh - 195rpx);
		padding: 30rpx 30rpx 0 30rpx;
		// box-sizing: border-box;
	}
}
</style>

<style lang="scss" scoped>
/* 自定义 css */
.flex {
	display: flex;
}

.flex_d_c {
	flex-direction: column;
}

.h_sb {
	justify-content: space-between;
}

.h_start {
	justify-content: flex-start;
}

.h_center {
	justify-content: center;
}

.v_center {
	align-items: center;
}

.v_end {
	align-items: flex-end;
}

.v_baseline {
	align-items: baseline;
}
</style>

